<template>
  <div class="signed-agent-detail-view view-container">

    <header-module left-custom padding>
      <template #left-con>
        <span style="margin-right: 30px">{{ formData.userName }}</span>
        <el-tag type="warning" size="small">
          {{ getLabel('agent_status_person',formData?.agentStatus) }}
        </el-tag>
      </template>

      <template #btn>
        <el-button class="main-btn" size="small" @click="handlBack">返回</el-button>
        <el-button type="primary" v-auth="{v:['crm:baseInfo:agent:signedAgent:change']}" size="small"
          @click="handlChange">变更信息</el-button>

      </template>

    </header-module>

    <div class="main-content">

      <el-form :inline="true" label-position="right" label-width="100px" size="small" class="filter-form-inline">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :span="8">
            <el-form-item label="兼职编号：">
              {{ formData?.agentNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="兼职姓名：">
              {{ formData?.userName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话：">
              {{ formData.tel }}
            </el-form-item>
          </el-col>

          <el-col :span="8" label-width="140px">
            <el-form-item label="联系地址：">
              {{ formData?.address }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号：">
              {{ formData?.cardNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建人：">
              {{ formData.creatorName }}
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="创建时间：">
              <span>{{ dateFormat("yyyy-mm-dd HH:MM:SS",formData.createdAt) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别：">
              {{ formData?.sex === '1' ? '男' :'女' }}
            </el-form-item>
          </el-col>
          <el-col :lg="24" :xs="4">
            <el-form-item label="身份证附件：">
              <div v-for="(item,index) in formData.cardFiles" :key="index" class="file-item">
                <image-upload-view disabled="true" :data="item" />
              </div>
            </el-form-item>
          </el-col>

          <el-col>
            <item-title title="意向代理业务" />
          </el-col>
          <el-col>
            <table-view :data="formData.list" header-cell-class-name="table-header" size="medium" border>

              <el-table-column prop="productName" label="代理产品" header-align="center" :show-overflow-tooltip="true" />

              <el-table-column prop="productLineName" label="产品线" align="center" :show-overflow-tooltip="true" />

              <el-table-column label="代理地区" header-align="center" :show-overflow-tooltip="true">
                <template #default="{row}">
                  <area-list-view :areas="row.region" />
                </template>
              </el-table-column>

              <el-table-column label="代理属性" align="center" :show-overflow-tooltip="true">
                <template #default="{row}">
                  <span v-for="(item,index) in row.agentIntentionAttribute" :key="index">
                    {{ getLabel('agentAttribute', item) }}
                  </span>
                </template>
              </el-table-column>

              <el-table-column prop="terminalName" label="代理终端" align="center" :show-overflow-tooltip="true">
                <template #default="{row}">
                  <el-tooltip class="item" effect="dark" :content="handleTerminalName(row.terminalList)"
                    placement="top-start">
                    <span> {{row.terminalName}}</span>
                  </el-tooltip>
                </template>
              </el-table-column>

              <el-table-column prop="desc" label="其他描述" align="center" :show-overflow-tooltip="true" />

            </table-view>
          </el-col>

        </el-row>
      </el-form>

    </div>

  </div>
</template>

<script>
import signedAgentChangeView from "@/pages/CRM/views/channel/signedAgent/modules/signedAgentChangeView";
import { useRoute, useRouter } from "vue-router";
import { defineComponent, inject, onMounted, reactive, toRefs } from "vue";

export default defineComponent({
  name: "SignedAgent",
  components: { signedAgentChangeView },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const api = inject("api");
    var data = reactive({
      formData: {},
    });

    const handleTerminalName = (list) => {
      list = JSON.parse(list);
      var str = "";
      for (let i = 0; i < list.length; i++) {
        str += list[i].terminalName;
        if (i !== list.length - 1) {
          str = str + "、";
        }
      }
      return str;
    };

    // 返回
    const handlBack = () => {
      router.go(-1);
    };

    const handlDetail = (id) => {
      api.channelAgent.POTENTIALAGENT_DETAIL(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.data;
        }
      });
    };

    // 变更
    const handlChange = () => {
      router.push({
        path: "/baseInfo/customer/baseInfoAgent/createAgent",
        query: { id: route.query.id, type: route.query.type },
      });
    };

    const succsess = () => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    };

    onMounted(() => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    });

    return {
      ...toRefs(data),
      handleTerminalName,
      handlBack,
      handlChange,
      handlDetail,
      succsess,
    };
  },
});
</script>

<style scoped>
</style>
